<template>
    <div id="map" ref="rootmap"></div>
</template>

<script>
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import Map from 'ol/Map'
import View from 'ol/View'

export default {
    name: 'test',
    data() {
        return {
            map:''
        };
    },
    mounted () {
        this.initmap()
    },
    methods: {
        initmap(){
			let mapconta = this.$refs.rootmap
            this.map = new Map(
		            {
						target: mapconta,
		                layers: [
		                new TileLayer({
		                    source: new XYZ({
		                    url:
		                        "http://t{1-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=df5b7775fab31595f6c43caadb9af47d",
		                    }),
		                }),
		                ],
		                view: new View({
		                projection: "EPSG:4326",
		                center: [114.01884201049803, 22.621443705100845],
		                zoom: 14,
		                }),
		            }
		);
        },
    }
};
</script>
